<template>
	<el-dialog
		:visible="visible"
		@update:visible="(val) => $emit('update:visible', val)"
		width="900px"
		top="5px"
	>
		<div class="sign-wrap" v-if="pages.length">
			<div class="sign">
				<img :src="pages[currentIndex - 1].url" alt="" />

				<div
					class="stamp"
					v-for="(stamp, index) in pages[currentIndex - 1].stamps"
					:style="{
						left: stamp.left + 'px',
						top: stamp.top + 'px',
						cursor: stamp.seted ? '' : mousedown ? 'grabbing' : 'grab'
					}"
					:class="{
						'stamp--handle': !stamp.seted,
						'stamp--seted': stamp.seted
					}"
					@mousedown="(event) => onMousedown(event, stamp)"
					@mousemove="(event) => onMousemove(event, stamp)"
					@mouseup="(event) => onMouseup(event, stamp)"
				>
					<img :src="signature" alt="" />
					<div class="stamp__btns">
						<div
							class="btn"
							style="background: red"
							@click="pages[currentIndex - 1].stamps.splice(index, 1)"
						>
							移除
						</div>
						<!-- <div
							class="btn"
							style="background: #5f88ff"
							v-if="!stamp.seted"
							@click="stamp.seted = true"
						>
							放置
						</div>
						<div
							class="btn"
							style="background: #848484"
							v-else
							@click="stamp.seted = false"
						>
							重置
						</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="sign-foot">
			<el-pagination
				@current-change="onCurrentChange"
				:current-page="currentIndex"
				:page-size="1"
				layout="total, prev, pager, next, jumper"
				:total="pages.length"
				size="mini"
			>
			</el-pagination>
			<el-button type="primary" size="small" @click="addSign"
				>在此页加入签章</el-button
			>
			<div></div>
			<el-button type="primary" size="small" @click="confirm"
				>设置完成</el-button
			>
		</div>
	</el-dialog>
</template>

<script>
import { saveAndSignature } from '@/api'
import axios from 'axios'

export default {
	props: {
		visible: Boolean,
		signature: String,
		pageImages: Array
	},
	data() {
		return {
			signature: '',
			currentIndex: 1,
			pages: [],

			mousedown: false, // 鼠标是否按下
			mousePos: {
				pageX: null,
				pageY: null
			}
		}
	},
	watch: {
		pageImages: {
			handler(pageImages) {
				this.pages = pageImages.map((url) => {
					return {
						url,
						stamps: []
					}
				})
			},
			immediate: true
		}
	},
	computed: {},
	mounted() {},
	methods: {
		onCurrentChange(current) {
			this.currentIndex = current
		},

		addSign() {
			this.pages[this.currentIndex - 1].stamps.push({
				left: 420,
				top: 620
				// seted: false
			})
		},

		onMousedown(event, stamp) {
			if (!stamp.seted) {
				this.mousedown = true
			}
			this.mousePos.pageX = event.pageX
			this.mousePos.pageY = event.pageY
		},
		onMousemove(event, stamp) {
			if (!this.mousedown) return
			stamp.left += event.pageX - this.mousePos.pageX
			stamp.top += event.pageY - this.mousePos.pageY
			this.mousePos.pageX = event.pageX
			this.mousePos.pageY = event.pageY
		},
		onMouseup(event, stamp) {
			this.mousedown = false
		},

		confirm() {
			const data = this.pages
				.map((page) => page.stamps)
				// .map((stamps) => stamps.filter((stamp) => stamp.seted))
				.map((stamps, index) => {
					return stamps.map((stamp) => {
						return {
							pageWidth: 600,
							pageHeight: 850,
							page: index + 1,
							offsetX: stamp.left,
							offsetY: stamp.top,
							signWidth: 100,
							signHeight: 100
						}
					})
				})
				.flat()
			this.$emit('confirm', data)
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.sign-wrap {
	display: flex;
	justify-content: center;
	.sign {
		position: relative;
		height: 850px;
		border: 1px dashed #bbb;
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: center;
		}
		.stamp {
			position: absolute;
			margin: -12px;
			padding: 9px;
			border-radius: 4px;
			user-select: none;
			border: 3px solid transparent;

			img {
				width: 100px;
				height: 100px;
				pointer-events: none;
			}

			&__btns {
				display: flex;
				margin-top: 9px;
				.btn {
					flex: 1;
					margin-inline: 2px;
					font-size: 12px;
					color: #fff;
					text-align: center;
					line-height: 2;
					cursor: pointer;
					&:hover {
						opacity: 0.8;
					}
				}
			}
			&--handle {
				animation: flash linear 0.9s infinite;
			}

			&--seted {
				.stamp__btns {
					visibility: hidden;
				}
				&:hover {
					.stamp__btns {
						visibility: visible;
					}
				}
			}
		}
	}
}
.sign-foot {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 5px;
	margin-top: 10px;
}
::v-deep {
	.el-dialog__header {
		padding: 15px;
		padding-bottom: 5px;
	}
	.el-dialog__body {
		padding: 15px;
	}
}

@keyframes flash {
	0% {
		// background: rgba(0, 0, 0, 0.05);
		border-color: #5f88ff;
	}
	49% {
		// background: rgba(0, 0, 0, 0.05);
		border-color: #5f88ff;
	}
	51% {
		background: transparent;
		border-color: transparent;
	}
	100% {
		background: transparent;
		border-color: transparent;
	}
}
@keyframes text-flash {
	0% {
		display: block;
	}
	49% {
		display: block;
	}
	51% {
		display: none;
	}
	100% {
		display: none;
	}
}
</style>
